<template>
    <div class="con">
        <el-row class="info" :gutter="24">
            <el-col :span="4">姓名：{{tableData.name}}</el-col>
            <el-col :span="4">性别：{{tableData.sex}}</el-col>
            <el-col :span="4">年龄：{{tableData.age}}</el-col>
            <el-col :span="4">科别：{{tableData.department}}</el-col>
            <el-col :span="4">病床：{{tableData.bed}}</el-col>
            <el-col :span="4">住院号：{{tableData.hospitalized}}</el-col>
        </el-row>
        <table class="noRowspan" width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td>日期</td>
                <td class="item" v-for="(item,i) in tableData.date" :key="i">{{item}}</td>
            </tr>
            <tr>
                <td>患病日数</td>
                <td class="item" v-for="(item,i) in tableData.daysAfterSick" :key="i">{{item}}</td>
            </tr>
            <tr v-if="httpType == 'http' && urlData.PatroInfoType == '6'">
                <td>术后日数</td>
                <td class="item" v-for="(item,i) in tableData.daysAfterOperation" :key="i">{{item}}</td>
            </tr>
            <tr>
                <td class="date">每日时间</td>
                <td class="item date" v-for="item in days" :key="item">
                    <TimeCon class="item" :itemCon="TimeSplit"></TimeCon>
                </td>
            </tr>
        </table>
        <div class="chart" style="display:flex">
            <div class="empty">
                <span class="chartItem" v-for="(item,i) in ChartConfig" :key="i">
                    {{item.name}}
                    <span v-for="index in 13" v-if="index == 0" :key="index" :style="`bottom:-5px`" class="scale">{{item.cellMin}}</span>
                    <span v-for="index in 13" v-if="index != 13" :key="index" :style="`bottom:${YHeight*index-7}px`" class="scale">{{item.cellMin+index*item.displaySplit}}</span>
                </span>
            </div>
            <Render :days="days" :TimeArr="TimeSplit" @yHeight="getYHeight" class="zrender"></Render>
        </div>
        <table class="noRowspan print" width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td>血压(mmhg)</td>
                <td class="item" v-for="(v,index) in tableData.bloodPressure" :key="index">
                    <SeparateTd class="item" :itemCon="v"></SeparateTd>
                </td>
            </tr>
            <tr>
                <td>大便次数</td>
                <td class="item" v-for="(item,i) in tableData.shitTimes" :key="i">{{item}}</td>
            </tr>
            <tr>
                <td>身高(cm)</td>
                <td class="item" v-for="(item,i) in tableData.height" :key="i">{{item}}</td>
            </tr>
            <tr>
                <td>体重(kg)</td>
                <td class="item" v-for="(item,i) in tableData.weight" :key="i">{{item}}</td>
            </tr>
            <tr>
                <td>皮试结果</td>
                <td class="item" v-for="(item,i) in tableData.skinTestRst" :key="i">{{item}}</td>
            </tr>
            <div v-for="(item,i) in tableData.StatisticsSummary" :key="i">
                <tr v-for="(trItem,trI) in item" :key="trI" >
                    <td>{{trItem.Name}}</td>
                    <td class="item" v-for="(itemData,index) in trItem.Data" :key="index">{{itemData}}</td>
                </tr>
            </div>
        </table>

        <table class="yesRowspan print" width="100%" border="0" cellspacing="0" cellpadding="0" v-if="httpType == 'http' && urlData.PatroInfoType == '13' && isShow">
           <tr>
                <th rowspan="2">日期</th>
                <th rowspan="2">年龄</th>
                <th colspan="2">沐浴</th>
                <th colspan="4">脐带</th>
                <th colspan="3">眼</th>
                <th colspan="3">口腔</th>
                <th colspan="2">鼻</th>
                <th colspan="6">皮肤</th>
                <th colspan="3">头</th>
                <th colspan="2">大便</th>
                <th colspan="2">小便</th>
                <th rowspan="2">体重</th>
                <th rowspan="2">签名</th>
                <th rowspan="2">备注</th>
            </tr>
            <tr>
                <th>护理</th>
                <th>水浴</th>
                <th>正常</th>
                <th>出血</th>
                <th>发炎</th>
                <th>脱落</th>
                <th>正常</th>
                <th>红肿</th>
                <th>分泌</th>
                <th>正常</th>
                <th>红肿</th>
                <th>白点</th>
                <th>正常</th>
                <th>鼻塞</th>
                <th>正常</th>
                <th>干燥</th>
                <th>红斑</th>
                <th>黄疸</th>
                <th>脓泡</th>
                <th>红臂</th>
                <th>正常</th>
                <th>产瘤</th>
                <th>血肿</th>
                <th>正常</th>
                <th>绿便</th>
                <th>正常</th>
                <th>无</th>
            </tr>
            <tr v-for="(item,i) in yesRowspanTable" :key="i">
                <td>{{item["RecordTime"]}}</td>
                <td>{{item["Age"]}}</td>
                <td>{{item["BathNurse"]}}</td>
                <td>{{item["BathingBath"]}}</td>
                <td>{{item["UmbilicalCordzc"]}}</td>
                <td>{{item["UmbilicalCordcx"]}}</td>
                <td>{{item["UmbilicalCordfy"]}}</td>
                <td>{{item["UmbilicalCordtl"]}}</td>
                <td>{{item["Eyezc"]}}</td>
                <td>{{item["Eyehz"]}}</td>
                <td>{{item["Eyefm"]}}</td>
                <td>{{item["OralCavityzc"]}}</td>
                <td>{{item["OralCavityhz"]}}</td>
                <td>{{item["OralCavitybd"]}}</td>
                <td>{{item["Nosezc"]}}</td>
                <td>{{item["Nosebs"]}}</td>
                <td>{{item["Skinzc"]}}</td>
                <td>{{item["Skingz"]}}</td>
                <td>{{item["SkinErythema"]}}</td>
                <td>{{item["Skinhd"]}}</td>
                <td>{{item["Skinnp"]}}</td>
                <td>{{item["Skinhb"]}}</td>
                <td>{{item["Headzc"]}}</td>
                <td>{{item["Headcl"]}}</td>
                <td>{{item["Headxz"]}}</td>
                <td>{{item["Shitzc"]}}</td>
                <td>{{item["Shitlb"]}}</td>
                <td>{{item["Urinezc"]}}</td>
                <td>{{item["Urinew"]}}</td>
                <td>{{item["Weight"]}}</td>
                <td>{{item["Autograph"]}}</td>
                <td>{{item["Notes"]}}</td>
            </tr>
        </table>

        <div class="pageNum">页码:{{tableData.pageNumber}}</div>
    </div>
</template>
<script>
import TimeCon from '@/components/TimeCon'
import Render from '@/components/Render'
import SeparateTd from '@/components/SeparateTd'
import {tableData,configData} from '@/mock/index'
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
import { getFullTime } from '../js/utli'
export default {
    data (){
        return {
            tableData:[],
            configData:[],
            TimeSplit:[],
            ChartConfig:[],
            YHeight:0,
            days:0,  //天数
            isShow:false,  //是否显示特定表格 
            yesRowspanTable:[], //特定表格数据
        }
    },
    mounted(){
        if (this.httpType == "http") {
            this.$axios({
                method:'post',
                url:`${this.configUrl}/api/PatrolInfo/ChartSummary`,
                data:{"PatientCode":this.urlData['cstId'],"beginDate":this.urlData['begin'],"endDate":this.urlData['end'],"PatroInfoType":this.urlData['PatroInfoType']},
            }).then(res => {
                res = res.data.Data
                this.tableData = res
                this.days = res.date.length
            })
            this.$axios({
                method:'get',
                url:`${this.configUrl}/api/PatrolInfo/ChartAxaisConfig`,
                data:{},
            }).then(res => {
                res = res.data.Data
                this.TimeSplit = res.TimeSplit
                this.ChartConfig = res.yAxisData
            })

            if (this.urlData['OrgCode'] == "0221") {
                this.isShow = true
                 this.$axios({
                    method:'get',
                    url:`${this.configUrl}/api/PatrolInfoInNewborn/GetPatrolInfoInNewborn?patientCode=${this.urlData['cstId']}&orgCode=${this.urlData['OrgCode']}`,
                    data:{},
                }).then(res => {
                  res = res.data.Data
                  this.yesRowspanTable = res
                  this.yesRowspanTable.forEach(item => {
                     item.RecordTime = getFullTime(item.RecordTime)
                  })
                })
            }
        }else{
            this.days = tableData.date.length
            this.TimeSplit = configData.TimeSplit
            this.tableData = tableData
            this.ChartConfig = configData.yAxisData
        }
    },
    methods:{
        getYHeight(msg){
            this.YHeight = msg
        }
    },
    components:{
        TimeCon,
        Render,
        SeparateTd
    },
    computed:{
        ...mapState({
            configUrl:state=>state.configUrl,
            httpType:state=>state.httpType,
            urlData:state=>state.data,
        })
    },
    created(){
        
    }
}
</script>
<style lang="less" scoped>
    .con{
        padding-bottom: 35px;
        position: relative;
        width: 1270px;
        max-width: 1270px;
        height: 100%;
        .info{
            font-size: 13px
        }
        .chart{
            width: 100%;
            border-right: 1px solid #000;
            .empty{
                width: 95px;
                height: 1250px;
                display: flex;
                &:last-child{
                    clear: both;
                }            
            }
            #main{
                flex: 1
            }
        }
        .el-row{
            margin: 5px 0 !important
        }
        .flex{
            display: flex;
            justify-content: space-between;
        }
        .zrender{
            width: 100%
        }
        .empty{
            display: flex;        
        }
        .noRowspan{
            font-size: 14px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            tr{
                display: flex;
                width: 1270px;
                // width: 100%;
                td{
                    width: 95px;
                    padding:5px 0;
                    text-align: center;
                    border-left: 1px solid #000;
                    border-top: 1px solid #000;
                    &:last-child{
                        border-right: 0
                    };
                };
                .item{
                    flex:1;
                };
                .date{
                    padding: 0;
                    font-size: 10px;
                    &:first-child{
                        font-size: 14px;
                    }
                }
            };
            &:last-child{
                margin: 0 0 10px 0
            }
        }
        .yesRowspan{
            font-size: 12px;
            padding: 0;
            margin-bottom: 10px;
            border-right: 1px solid #000;
            border-bottom: 1px solid #000;
            tr{
                width: 1270px;
                td{
                    text-align: center;
                    word-break: break-all;
                    border-left: 1px solid #000;
                    border-top: 1px solid #000;
                }
                th{
                    text-align: center;
                    border-left: 1px solid #000;
                    border-top: 1px solid #000
                }
            }
        }
        .chartItem{
            border-right: 1px solid;
            flex: 1;
            text-align: center;
            font-size: 13px;
            position: relative;
            &:first-child{
                border-left: 1px solid
            }
            &:last-child{
                border-right: 0
            };
            .scale{
                position: absolute;
                bottom:-5px;
                left: 2px;
                z-index: 1000;
            }
        }
        .pageNum{
            position: absolute;
            right:0;
            bottom:0
        }
    }
</style>